<h2>Why is this an issue?</h2>
<p>Logical AND (<code>&amp;&amp;</code>) operator is sometimes used to conditionally render in React (aka short-circuit evaluation). For example,
<code>myCondition &amp;&amp; &lt;MyElement /&gt;</code> will return <code>&lt;MyElement /&gt;</code> if <code>myCondition</code> is <code>true</code>
and <code>false</code> otherwise.</p>
<p>React considers <code>false</code> as a 'hole' in the JSX tree, just like <code>null</code> or <code>undefined</code>, and doesn’t render anything
in its place. But if the condition has a <code>falsy</code> non-boolean value (e.g. <code>0</code>), that value will leak into the rendered
result.</p>
<p>This rule will report when the condition has type <code>number</code> or <code>bigint</code>.</p>
<p>In the case of React Native, the type <code>string</code> will also raise an error, as your render method will crash if you render <code>0</code>,
<code>''</code>, or <code>NaN</code>.</p>
<pre data-diff-id="1" data-diff-type="noncompliant">
function Profile(props) {
  return &lt;div&gt;
    &lt;h1&gt;{ props.username }&lt;/h1&gt;
    { props.orders &amp;&amp; &lt;Orders /&gt; } { /* Noncompliant: 0 will be rendered if no orders available */ }
  &lt;/div&gt;;
}
</pre>
<p>Instead, make the left-hand side a boolean to avoid accidental renderings.</p>
<pre data-diff-id="1" data-diff-type="compliant">
function Profile(props) {
  return &lt;div&gt;
    &lt;h1&gt;{ props.username }&lt;/h1&gt;
    { props.orders &gt; 0 &amp;&amp; &lt;Orders /&gt; }
  &lt;/div&gt;;
}
</pre>
<p>Another alternative to achieve conditional rendering is using the ternary operator (<code>myCondition ? &lt;MyElement /&gt; : null</code>), which
is less error-prone in this case as both return values are explicit.</p>
<pre data-diff-id="1" data-diff-type="compliant">
function Profile(props) {
  return &lt;div&gt;
    &lt;h1&gt;{ props.username }&lt;/h1&gt;
    { props.orders ? &lt;Orders /&gt; : null }
  &lt;/div&gt;;
}
</pre>
<h2>Resources</h2>
<h3>Documentation</h3>
<ul>
  <li> React Documentation - <a href="https://react.dev/learn/conditional-rendering#logical-and-operator-">Conditional Rendering</a> </li>
</ul>
